<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/font/css/common.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/font/css/register.css">
    <!--导入jquery-->
    <script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>

    <script>
    /*
    表单校验：
    1.用户名：单词字符，长度8到20位
    2.密码：单词字符，长度8到20位
    3.email：邮件格式
    4.姓名：非空
    5.手机号：手机号格式
    6.出生日期：非空
    7.验证码：非空
    */

    //校验用户名
    //单词字符，长度8到20位
    function checkUsername() {
    //1.获取用户名值
    var username = $("#username").val();
    //2.定义正则
    var reg_username = /^\w{8,20}$/;

    //3.判断，给出提示信息
    var flag = reg_username.test(username);
    if(flag){
    //用户名合法
    $("#username").css("border","");
    }else{
    //用户名非法,加一个红色边框
    $("#username").css("border","1px solid red");
    }

    return flag;
    }

    //校验密码
    function checkPassword() {
    //1.获取密码值
    var password = $("#password").val();
    //2.定义正则
    var reg_password = /^\w{8,20}$/;

    //3.判断，给出提示信息
    var flag = reg_password.test(password);
    if(flag){
    //密码合法
    $("#password").css("border","");
    }else{
    //密码非法,加一个红色边框
    $("#password").css("border","1px solid red");
    }

    return flag;
    }

    //校验邮箱
    function checkEmail(){
    //1.获取邮箱
    var email = $("#email").val();
    //2.定义正则		itcast@163.com
    var reg_email = /^\w+@\w+\.\w+$/;

    //3.判断
    var flag = reg_email.test(email);
    if(flag){
    $("#email").css("border","");
    }else{
    $("#email").css("border","1px solid red");
    }

    return flag;
    }

    $(function () {
    //当表单提交时，调用所有的校验方法
    $("#registerForm").submit(function(){
    //1.发送数据到服务器
    if(checkUsername() && checkPassword() && checkEmail()){
    //校验通过,发送ajax请求，提交表单的数据   username=zhangsan&password=123

    $.post("user/regist",$(this).serialize(),function(data){
    //处理服务器响应的数据  data  {flag:true,errorMsg:"注册失败"}

    if(data.flag){
    //注册成功，跳转成功页面
    location.href="register_ok.html";
    }else{
    //注册失败,给errorMsg添加提示信息
    $("#errorMsg").html(data.errorMsg);

    }
    });

    }
    //2.不让页面跳转
    return false;
    //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
    });

    //当某一个组件失去焦点是，调用对应的校验方法
    $("#username").blur(checkUsername);
    $("#password").blur(checkPassword);
    $("#email").blur(checkEmail);


    });


    </script>


    </head>
    <body>
    <!-- 头部 end -->
    <div class="rg_layout">
    <div class="rg_form clearfix">
    <div class="rg_form_left">
    <p>新用户注册</p>
    <p>USER REGISTER</p>
    </div>
    <div class="rg_form_center">
    <div id="errorMsg" style="color:red;text-align: center"></div>
    <!--注册表单-->
    <form id="registerForm" action="user">
    <!--提交处理请求的标识符-->
    <input type="hidden" name="action" value="register">
    <table style="margin-top: 25px;">
    <tr>
    <td class="td_left">
    <label for="username">用户名</label>
    </td>
    <td class="td_right">
    <input type="text" id="username" name="username" placeholder="请输入账号">
    </td>
    </tr>
    <tr>
    <td class="td_left">
    <label for="password">密码</label>
    </td>
    <td class="td_right">
    <input type="text" id="password" name="password" placeholder="请输入密码">
    </td>
    </tr>
    <tr>
    <td class="td_left">
    <label for="email">Email</label>
    </td>
    <td class="td_right">
    <input type="text" id="email" name="email" placeholder="请输入Email">
    </td>
    </tr>
    <tr>
    <td class="td_left">
    <label for="name">姓名</label>
    </td>
    <td class="td_right">
    <input type="text" id="name" name="name" placeholder="请输入真实姓名">
    </td>
    </tr>
    <tr>
    <td class="td_left">
    <label for="telephone">手机号</label>
    </td>
    <td class="td_right">
    <input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
    </td>
    </tr>
    <tr>
    <td class="td_left">
    <label for="sex">性别</label>
    </td>
    <td class="td_right gender">
    <input type="radio" id="sex" name="sex" value="男" checked> 男
    <input type="radio" name="sex" value="女"> 女
    </td>
    </tr>
    <tr>
    <td class="td_left">
    <label for="birthday">出生日期</label>
    </td>
    <td class="td_right">
    <input type="date" id="birthday" name="birthday" placeholder="年/月/日">
    </td>
    </tr>
    <tr>
    <td class="td_left">
    <label for="check">验证码</label>
    </td>
    <td class="td_right check">
    <input type="text" id="check" name="check" class="check">
    <input type="button" id="codeBtn" style="height: 32px;border: #0c0c0c 1px solid" value="  发送短信验证码  " onclick="javaScript:sendSms();"/>
    <script type="text/javascript">
    let t ;
    //发送短信验证码
    function sendSms() {
        $.get('${pageContext.request.contextPath}/member/sendSmsCode',{"phone":$("#telephone").val()},function(res) {
            if ("1"==res){
               t = setInterval(showTime,1000) ;
            }
        }) ;
    }

    let time = 60 ;
    function showTime() {
        time-- ;
        if (time==0){
            clearInterval(t) ;
            $("#codeBtn").val(  发送短信验证码  ) ;
        }
        $("#codeBtn").val(time+"秒后,再次发送") ;
    }
    </script>
    </td>
    </tr>
    <tr>
    <td class="td_left">
    </td>
    <td class="td_right check">
    <input type="submit" class="submit" value="注册">
    <span id="msg" style="color: red;"></span>
    </td>
    </tr>
    </table>
    </form>
    </div>
    <div class="rg_form_right">
    <p>
    已有账号？
    <a href="#">立即登录</a>
    </p>
    </div>
    </div>
    </div>

    </body>
    </html>
